<template>
	<view ref="avatar" class="flex-col flex avatar relative"
		:class="[trigger ? 'trigger' : '', `mx-${props.margin[0]} my-${props.margin[1]}`]" :style="[
			{ width: width + props.unit, height: height + props.unit },
			{
				marginLeft: _margin[0] + 'rpx',
				marginTop: _margin[1] + 'rpx',
				marginRight: _margin[2] + 'rpx',
				marginBottom: _margin[3] + 'rpx',
				paddingLeft: _padding[0] + 'rpx',
				paddingTop: _padding[1] + 'rpx',
				paddingRight: _padding[2] + 'rpx',
				paddingBottom: _padding[3] + 'rpx'
			},
		]">
		<zh-sheet @click="emits('click', $event)" :color="props.color" :_class="[customClass, 'flex-center flex-col']"
			:_style="[customCSSStyle, { flexShrink: 1 }]" :followTheme="props.followTheme" :dark="props.dark"
			:round="props.round" :shadow="props.shadow" :outlined="props.outlined" :border="props.border"
			:borderStyle="props.borderStyle" :borderDirection="props.borderDirection" :text="props.text"
			:transprent="props.img ? true : props.transprent" :linear="props.linear" :linearDeep="props.linearDeep"
			:width="width" :height="height" :margin="[0]" :padding="[0]" :unit="props.unit">
			<slot>

				<image :userInteractionEnabled="false" v-if="props.img" :src="imgLoadError?props.errorImg:img_src"
					mode="scaleToFill" :style="{ width: imgsize, height: imgsize }" :class="['round-' + props.round]"
					@error="imgOnError"></image>
				<tm-icon :color="props.iconColor" :userInteractionEnabled="false" v-else-if="props.icon"
					:name="props.icon" :font-size="fontSize" :unit="props.unit"></tm-icon>
				<zh-text :userInteractionEnabled="false" v-else="props.label" :label="props.label" :font-size="fontSize"
					:unit="props.unit"></zh-text>

			</slot>
		</zh-sheet>
		<view @click.stop="emits('click', $event)" v-if="props.triggerIcon"
			class="absolute flex flex-col-bottom-end b-0 r-0" :style="{ width: `${width}${props.unit}` }">
			<zh-sheet :userInteractionEnabled="false" :width="triggSize.size" :height="triggSize.size"
				:_style="props.triggerStyle" :text="props.img ? false : !props.text"
				:color="props.triggerColor || props.color" :transprent="false" :dark="props.dark" _class="flex-center "
				:margin="[0, 0]" :padding="[0, 0]" :round="24" :unit="props.unit">
				<tm-icon :name="props.triggerIcon" :font-size="triggSize.fontSize" :unit="props.unit"
					:color="props.iconColor"></tm-icon>
			</zh-sheet>
		</view>
	</view>
</template>

<script lang="ts" setup>
	/**
 * 头像
 * @description 也可以搭配头像组形成头像组合。zh-avatar-group
 */
	import { computed, PropType, ref } from 'vue'
	import { custom_props, computedClass, computedStyle } from '@/tool/lib/minxs'
	import { isUrl } from '@/common/utils/util';
	import { getFileSignParams } from '@/common/utils/signatureUtil';
	import commonApi from '@/api/modules/common';
	const emits = defineEmits(['click'])
	const props = defineProps({
		...custom_props,
		size: {
			type: [Number],
			default: 90
		},
		//是否开启交互，在pc端有用，鼠标移上去变成手型
		trigger: {
			type: [Boolean, String],
			default: false
		},
		triggerColor: {
			type: [String],
			default: ''
		},
		iconColor: {
			type: [String],
			default: ''
		},
		triggerIcon: {
			type: [String],
			default: ''
		},
		triggerStyle: {
			type: [String],
			default: ''
		},
		round: {
			type: [Number],
			default: 6
		},
		border: {
			type: [Number],
			default: 0
		},
		margin: {
			type: Array as PropType<Array<number>>,
			default: () => [0, 0]
		},
		padding: {
			type: Array as PropType<Array<number>>,
			default: () => [0, 0]
		},
		transprent: {
			type: [Boolean, String],
			default: false
		},
		label: {
			type: String,
			default: ''
		},
		icon: {
			type: String,
			default: ''
		},
		img: {
			type: String,
			default: ''
		},
		/**
		 * 当img出错时的占位图片
		 */
		errorImg: {
			type: String,
			default: ""
		},
		//自动匹配字体大小。
		fontSize: {
			type: [Number],
			default: 0
		},
		unit: {
			type: String,
			default: 'rpx'
		}
	})
	const imgLoadError = ref(false)
	/** 数组是左，上，右，下顺序。 */
	const _margin = computed(() => {
		if (props.margin.length == 1) return [props.margin[0], props.margin[0], props.margin[0], props.margin[0]]
		if (props.margin.length == 2) return [props.margin[0], props.margin[1], props.margin[0], props.margin[1]]
		if (props.margin.length == 3) return [props.margin[0], props.margin[1], props.margin[2], 0]
		if (props.margin.length == 4) return [props.margin[0], props.margin[1], props.margin[2], props.margin[3]]
		return [0, 0, 0, 0]
	})
	const _padding = computed(() => {
		if (props.padding.length == 1) return [props.padding[0], props.padding[0], props.padding[0], props.padding[0]]
		if (props.padding.length == 2) return [props.padding[0], props.padding[1], props.padding[0], props.padding[1]]
		if (props.padding.length == 3) return [props.padding[0], props.padding[1], props.padding[2], 0]
		if (props.padding.length == 4) return [props.padding[0], props.padding[1], props.padding[2], props.padding[3]]
		return [0, 0, 0, 0]
	})
	//自定义样式：
	const customCSSStyle = computed(() => computedStyle(props))
	//自定类
	const customClass = computed(() => computedClass(props))
	const width = computed(() => props.size ?? 90)
	const height = computed(() => props.size ?? 90)
	const fontSize = computed(() => {
		if (props.fontSize) return props.fontSize
		if (props.label) return parseInt(String(width.value)) * 0.4
		if (props.icon) return parseInt(String(width.value)) * 0.7
		return props.size ?? 90
	})
	const img_src = computed(() => {
		if (isUrl(props.img, false)) {
			return props.img + getFileSignParams();
		} else {
			if (props.img.startsWith('/')) {
				return props.img + getFileSignParams();
			}
			return commonApi.fileShowUrl.url + props.img + getFileSignParams();
		}
	});
	const imgsize = computed(() => {
		return uni.upx2px(fontSize.value - 4) + 'px'
	})
	const triggSize = computed(() => {
		let wh = width.value / 3 + 6
		wh = wh >= 64 ? 64 : wh

		return {
			size: wh,
			fontSize: wh * 0.5
		}
	})

	const imgOnError = () => {
		imgLoadError.value = true;
	}
</script>

<style scoped>
	.trigger {
		/* #ifndef APP-PLUS-NVUE */
		cursor: pointer;
		/* #endif */
	}
</style>